<html>
	<head>
		<meta charset=utf-8>
		<title>My first three.js app</title>
		<style>
			* { margin: 0; padding: 0}
		</style>
	</head>
	<body>
            <script src="../js/three.js"></script>
		<script>
            /*
            *构造函数ExtrudeGeometry(),利用2D轮廓生成3D模型,第二个参数是拉伸参数，
            *数据类型是对象， 属性amount表示拉伸长度，bevelEnabled表示拉伸是否产生倒角
            *amount	拉伸长度，默认100
            *bevelEnabled	是否使用倒角
            *bevelSegments	倒角细分数，默认3
            *bevelThickness	倒角尺寸(经向)
            *curveSegments	拉伸轮廓细分数
            *steps	拉伸方向细分数
            *extrudePath	扫描路径THREE.CurvePath，默认Z轴方向
            *material	前后面材质索引号
            *extrudeMaterial	拉伸面、倒角面材质索引号
            *bevelSize	倒角尺寸(拉伸方向)
            */


            /*
            *创建场景对象
            */ 
            let scene = new THREE.Scene();
            /*
            *创建拉伸网格模型
            */
            let shape = new THREE.Shape();
            //四条直线绘制一个矩形轮廓
            shape.moveTo(0,0);//起点
            shape.lineTo(0,50);//第2点
            shape.lineTo(50,50);//第3点
            shape.lineTo(50,0);//第4点
            shape.lineTo(0,0);//第5点
            let geometry = new THREE.ExtrudeGeometry(// 拉伸造型
                shape, // 二维轮廓
                //拉伸参数
                {
                    amout: 120, // 拉伸长度
                    bevelEnabled:false//无倒角
                }
            )
          
            let material=new THREE.MeshPhongMaterial({color:0x0000ff});//材质对象
            let mesh=new THREE.Mesh(geometry,material);//网格模型对象
            mesh.translateX(-160)
            scene.add(mesh);//网格模型添加到场景中

            /*
            *创建扫描网格模型，对于扫描而言不需要定义amount属性设置拉伸距离，设置扫描路径即可， 定义属性extrudePath
            */
            let shape1 = new THREE.Shape();
            /**四条直线绘制一个矩形轮廓*/
            shape1.moveTo(0,0);//起点
            shape1.lineTo(0,10);//第2点
            shape1.lineTo(10,10);//第3点
            shape1.lineTo(10,0);//第4点
            shape1.lineTo(0,0);//第5点
            /**创建轮廓的扫描轨迹(3D样条曲线)*/
            let curve = new THREE.CatmullRomCurve3([
                new THREE.Vector3( -10, -50, -50 ),
                new THREE.Vector3( 10, 30, 10 ),
                new THREE.Vector3( 8, 50, 50 ),
                new THREE.Vector3( -5, 0, 100),
                new THREE.Vector3( 50, 20, -100)
            ]);
            let geometry1 = new THREE.ExtrudeGeometry(//拉伸造型
                shape1,//二维轮廓
                //拉伸参数
                {
                    bevelEnabled:false,//无倒角
                    extrudePath:curve,//选择扫描轨迹
                    steps:50//扫描方向细分数
                }
            );
            let material1=new THREE.MeshPhongMaterial({color:0x0000ff});//材质对象
            let mesh1=new THREE.Mesh(geometry1,material1);//扫描网格模型对象
            scene.add(mesh1);//扫描网格模型添加到场景中

            /**
            * 光源设置
            */
            // 点光源
            let point = new THREE.PointLight(0xffffff); // 0xffffff 定义光照强度
            point.position.set(400, 200, 300); // 点光源位置
            scene.add(point); // 点光源添加到场景中
            // 环境光
            let ambient = new THREE.AmbientLight(0x444444);
            scene.add(ambient);
            
            /*
             *相机设置 
            */
            let width = window.innerWidth;
            let height = window.innerHeight;
            let k = width / height; // 窗口宽高比
            let s = 200; // 三维场景缩放系数
            let camera = new THREE.OrthographicCamera (-s*k,s*k, s,-s,1,1000);
            camera.position.set(100, 100, 100); // 设置相机位置
            camera.lookAt(scene.position); // 设置相机方向（指向的场景对象）

            /*
            * 创建渲染器对象
            */
            let renderer = new THREE.WebGLRenderer({
                antialias:true,       //是否开启反锯齿
            });
            renderer.setSize(width, height);
            renderer.setClearColor(0xb9d3ff,1);//设置背景颜色
            document.body.appendChild( renderer.domElement );// body元素中插入canvas对象
            renderer.render(scene,camera);// 执行渲染操作
		</script>
	</body>
</html>